import { useState, useEffect } from "react";
import { useParams } from 'react-router-dom'
import './category.scss'
import axios from 'axios'
import Swiper from "../home/swiper/swiper";


export default function Category() {
    var params = useParams()
    var [categoryList, setcategoryList] = useState([])
    var [name, setname] = useState()
    useEffect(() => {
        let id = params.id
        axios.get(`https://apipc-xiaotuxian-front.itheima.net/category?id=${id}`).then(res => {
            if (res.data.msg == '操作成功') {
                categoryList = res.data.result.children
                name = res.data.result.name
                setcategoryList([...categoryList])
                setname(name)
            }
        })
    }, [params.id])
    return (
        <div>
            <div id="navigation">
                <div className="container">
                    <a href="">首页 </a>
                    <span>&gt;</span>
                    <a href=""> {name}</a>
                </div>
            </div>
            <div className="container">
                <Swiper></Swiper>
            </div>

            <div id="category">
                <div className="container">
                    <div className="category_list">
                        <h3>全部分类</h3>
                        <ul>
                            {categoryList.map((item, index) => {
                                return (
                                    <li key={index}>
                                        <a href="">
                                            <img src={item.picture} alt="" />
                                            <p>{item.name}</p>
                                        </a>
                                    </li>
                                )
                            })}
                        </ul>
                    </div>
                    {categoryList.map((item, index) => {
                        return (
                            <div className="category_goods" key={index}>
                                <div className="container">
                                    <div className="head">
                                        <h3>- {item.name} -</h3>
                                        <p>温暖柔软，品质之选</p>
                                        <span className="more">查看全部&gt;</span>
                                    </div>
                                    <ul className="content">
                                        {item.goods.map((i, index) => {
                                            return (
                                                <li key={index}>
                                                    <img src={i.picture} alt="" />
                                                    <p>{i.name}</p>
                                                    <p>{i.desc}</p>
                                                    <p>￥{i.price}</p>
                                                </li>
                                            )
                                        })}

                                    </ul>
                                </div>
                            </div>
                        )
                    })}
                </div>
            </div>
        </div>
    )
}